@mixin range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: $lightBlue;
	cursor: pointer;
	margin-top: -7px;
	border: 0;
	transition: all .2s;
}
@mixin range-thumb-hover {
	background: $blue;
}
@mixin range-track {
	width: 100%;
	height: 10px;
	cursor: pointer;
	border-radius: 5px;
	background: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
	margin-top: 0px;
	transition: all .2s;
}
@mixin range-track-focus {
  box-shadow: $focus;
}
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  border-color: transparent;
  padding: 0;
	border: 0;
  min-width: 0;
  box-sizing: border-box;
  box-shadow: none;
  cursor: pointer;
  &:focus {
    outline: none;
  }
  &::-moz-focus-outer {
    border: 0;
  }
  &::-webkit-slider-thumb {
    @include range-thumb;
  }
  &::-webkit-slider-runnable-track {
    @include range-track;
  }
	&::-moz-range-thumb {
    @include range-thumb;
  }
  &::-moz-range-track {
    @include range-track;
  }
	&:hover {
    &::-webkit-slider-thumb {
			@include range-thumb-hover;
    }
    &::-moz-range-thumb {
			@include range-thumb-hover;
    }
  }
	&:focus {
    outline: 0;
    box-shadow: none;
    &::-webkit-slider-runnable-track {
			@include range-track-focus;
    }
    &::-moz-range-track {
			@include range-track-focus;
    }
  }
}

.range {
  display: grid;
  grid-template-columns: 1fr 38px;
  width: 100%;
}

$outputHeight: 22px;
$outputArrowWidth: 10px;
$outputBg: #E0E0E0;
output {
  background: $outputBg;
  color: rgba(0,0,0,1);
  line-height: $outputHeight;
  height: $outputHeight;
  text-align: center;
  font-size: 11px;
  margin-left: 12px;
  position: relative;
  cursor: default;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-radius: 5px;
  &::before {
    position: absolute;
    top: 50%;
    left: -($outputArrowWidth - 2px);
    transform: translateY(-50%);
    content: '';
    width: 0;
    height: 0;
    border-top: $outputArrowWidth solid transparent;
    border-bottom: $outputArrowWidth solid transparent;
    border-right: $outputArrowWidth solid $outputBg;
    border-radius: 0px 5px 5px 0px;
  }
}
